<template>
	<view class="supplier">
		<u-navbar title="商品列表" :border-bottom="false"></u-navbar>
		<view class="search_box">
			<u-search v-model="keyword" @custom="custom" @search="custom"></u-search>
		</view>
		<u-tabs :list="list" :current="current" @change="change"></u-tabs>
		<view class="waterfall">
			<scroll-view class="r" scroll-y="true" @scrolltolower="lower">
				<view v-if="flowList.length > 0">
					<view v-for="(item, index) in flowList" :key="index" class="item" @click="shoppingDetails(item.id)">
						<view class="img">
							<img :src="item.map_image" alt="" class="img_i" />
						</view>

						<view class="warp">
							<view class="name">{{ item.goods_title }}</view>
							<view class="surplus">
								<!-- <view>剩19张</view> -->
							</view>
							<view class="b">
								<view class="b_l">
									<view class="l1">售价:￥{{ Number(item.xj_sprice) }}</view>
								</view>
								<view class="b_t2">推广佣金:￥{{ Number(item.xj_fenyong) }}</view>
							</view>
						</view>
					</view>
					<view style="padding: 20rpx 0rpx; box-sizing: border-box">
						<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" :bg-color="'none'"></u-loadmore>
					</view>
				</view>
				<view v-else class="r_k">
					<view class="r_k_z">
						<img src="../../static/gb.png" alt="" />
						<view>该分类没有商品</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { selectgoodslist, getgoodsgenreall } from '../../libs/axios.js';
export default {
	data() {
		return {
			active: 0,
			classification: ['今日优惠', '冲调食品', '冲调食品', '冲调食品'],
			flowList: [],
			loadStatus: 'loadmore',
			page_num: 1,
			keyword: '',
			user: uni.getStorageSync('user'),
			list: [],
			current: 0
		};
	},
	onLoad() {
		this.getgetgoodsgenreall();
	},
	methods: {
		change(index) {
			this.current = index;
			this.loadStatus = 'loadmore';
			this.page_num = 1;
			this.flowList = [];
			this.lower();
		},
		async getgetgoodsgenreall() {
			this.list = [{ value: '', name: '全部' }];
			let info = await getgoodsgenreall();
			info.data.forEach((item) => {
				this.list.push({ value: item.id, name: item.title });
			});
			this.lower();
		},
		shoppingDetails(id) {
			uni.navigateTo({
				url: '/pages/shoppingDetails/shoppingDetails?id=' + id
			});
		},
		custom() {
			this.page_num = 1;
			this.loadStatus = 'loadmore';
			this.flowList = [];
			this.lower();
		},
		async lower() {
			console.log(this.current);
			if (this.loadStatus === 'nomore') {
				return false;
			} else {
				this.loadStatus = 'loading';
			}
			let option = {
				pageIndex: this.page_num,
				pageSize: 10,
				is_shelf: 1,
				genre_id: this.list[this.current].value,
				title: this.keyword
			};
			let info = await selectgoodslist(option);
			this.Partotal = info.data.meta.total;
			info.data.list.forEach((item) => {
				this.flowList.push(item);
			});

			if (info.data.list.length === 10) {
				this.page_num += 1;
				this.loadStatus = 'loadmore';
			} else {
				this.loadStatus = 'nomore';
			}
		}
	}
};
</script>

<style lang="scss">
.supplier {
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.search_box {
		margin: 0 28rpx;
		padding: 20rpx 0;
		background: #fff;
	}
	.waterfall {
		display: flex;
		.l {
			width: 25%;
			height: 75vh;
			overflow-y: scroll;
			.item {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(50, 50, 50, 1);
				box-sizing: border-box;
				position: relative;
				.btn {
					width: 6rpx;
					height: 28rpx;
					opacity: 1;
					border-radius: 0rpx 200rpx, 200rpx, 0rpx;
					background: rgba(255, 67, 73, 1);
					position: absolute;
					top: 36rpx;
					left: 0;
				}
			}
			.active {
				color: rgba(255, 67, 73, 1);
			}
		}
		.r {
			width: 100%;
			height: 75vh;
			overflow-y: scroll;

			.item {
				display: flex;
				padding: 20rpx 60rpx;
				box-sizing: border-box;
				.img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					overflow: hidden;
					position: relative;
					.img_i {
						width: 100%;
						height: 100%;
					}
					.img_t {
						position: absolute;
						bottom: 0;
						right: 0;
						left: 0;
						background: rgba(0, 0, 0, 0.4);
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
					}
				}
				.warp {
					width: 70%;
					height: 160rpx;
					position: relative;
					margin-left: 22rpx;
					.name {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
					}
					.surplus {
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(119, 119, 119, 1);
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						.b_t2 {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
							display: flex;
							.c {
								color: rgba(251, 99, 79, 1);
							}
						}
					}
					.b {
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(238, 10, 36, 1);
						.b_l {
							display: flex;
							justify-content: space-between;
							.l1 {
								font-size: 28rpx;
								font-weight: 400;
								color: rgba(238, 10, 36, 1);
							}
							.l2 {
								font-size: 24rpx;
								font-weight: 400;
								text-decoration-line: line-through;
								color: rgba(119, 119, 119, 1);
								margin-left: 8rpx;
							}
						}

						.r_img {
							width: 52rpx;
							height: 52rpx;
							background: rgba(255, 67, 73, 1);
							border-radius: 50%;
						}
					}
				}
			}
			.r_k {
				.r_k_z {
					font-size: 30rpx;
					font-weight: 400;
					color: rgba(119, 119, 119, 1);
					margin-top: 100rpx;
					text-align: center;
					position: relative;
					top: 200rpx;
					left: 0;
					right: 0;
					img {
						width: 382rpx;
						height: 244rpx;
					}
				}
			}
		}
	}
	.pro_box {
		width: 640rpx;
		padding: 30rpx;
		.top {
			display: flex;
			justify-content: space-between;
			padding: 25rpx;
			.itm {
				width: 25%;
				text-align: right;
			}
		}
		.itms {
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			background: rgba(248, 248, 248, 1);
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			padding: 0 30rpx;

			.itms_i {
				width: 65%;
				margin: 0 0 0 10rpx;
			}
		}
		.teccxt {
			margin-top: 30rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
		.bt {
			width: 570rpx;
			height: 80rpx;
			border-radius: 16rpx;
			background: rgba(255, 67, 73, 1);
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 43rpx auto 0 auto;
		}
	}
}
</style>
